<script setup>
import rftitle from './rftitle.vue'
import { exhaustFan } from '../pages/home/index'




</script>

<template>
  <rftitle class="mb-[30px]" title="进排风机状态"></rftitle>


  <div :class="item.className" class="min-h-[80px] w-full pl-[66px] pr-[26px] mb-[17px] pb-[8px] relative"
    v-for="(item, index) in exhaustFan" :key="index">
    <div class="absolute left-0 top-0 ">
      <img v-if="item.type == 2" class="w-[50px] h-[50px] around_rotate" src="../assets/three/red.png" alt="">
      <img v-else-if="item.type == 1" class="w-[50px] h-[50px] around_rotate" src="../assets/three/blue.png" alt="">
      <img v-else class="w-[50px] h-[50px] around_rotate" src="../assets/three/gray.png" alt="">
    </div>
    <div class="flex text-[16px]  pt-[18px] mb-[20px]">
      <div class=" text-white flex-1">{{ item.name }}</div>
      <div v-if="item.type == 2" class="text-red-400">故障</div>
      <div v-else-if="item.type == 1" class="text-blue-400">启动</div>
      <div v-else style="color: #999999;">未启动</div>
    </div>
    <div class="text-[14px] text-white mb-[8px]" v-for="(i, n) in item.data" :key="n">
      <span style="color: #B2E5FF;"> {{ i.name }}</span>{{ i.value }}
    </div>
  </div>



</template>

<style scoped>
.red_bg1 {
  background-image: url(../assets/three/red_bg.png);
  background-size: 100% 100%;
}

.blue_bg1 {
  background-image: url(../assets/three/blue_bg.png);
  background-size: 100% 100%;
}

.grey_bg1 {
  background-image: url(../assets/three/grey_bg.png);
  background-size: 100% 100%;
}



.red_bg2 {
  background-image: url(../assets/three/red_bg_2.png);
  background-size: 100% 100%;
}

.blue_bg2 {
  background-image: url(../assets/three/blue_bg_2.png);
  background-size: 100% 100%;
}

.grey_bg2 {
  background-image: url(../assets/three/grey_bg_2.png);
  background-size: 100% 100%;
}
</style>
